<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>video timeline v1.0</title>
	
	<link rel="stylesheet" type="text/css" href="./css/common.css" />
	<link rel="stylesheet" type="text/css" href="./script/slideplayer/style.css" />
	
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		a {
			color: #09f;
		}
		a:hover {
			text-decoration: none;
		}
	</style>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script type="text/javascript" src="./script/common.js"></script>
	<script type="text/javascript" src="./script/slideplayer/jquery.jplayer.js"></script>
	<script type="text/javascript" src="./script/preview2.js"></script>
	
	<script>
		$(document).ready(function(){
			$('#audio-slideshow').preview2();
		});
	</script>
	
</head>
<body>

<table width=100% cellpadding="0" cellspacing="0" ><tr><td width=100% align="center" valign="top">

	<table width="1024px" height="600" cellpadding="0" cellspacing="0" border="0">
		<tr><td width=100% valign="top" align="center" style="height: 25px;" ><h2>TIMELINE DEMO v1.0</h2></td></tr>
		<tr><td valign="top" align="center">
		<!-- main part -->

		<section>
			<div id="audio-slideshow" class="audio-slideshow" data-audio="./script/slideplayer/test.mp3" data-audio-duration="161">
				<div id="audio-slides" class="audio-slides"></div>
				
				<div class="audio-control-interface">
					<div class="play-pause-container">
						<a class="audio-play" tabindex="1">Play</a>
						<a class="audio-pause" tabindex="1">Pause</a>
					</div>
					<div class="time-container">
						<span class="play-time"></span> / <span class="total-time"></span>
					</div>
					<div class="timeline">
						<div class="timeline-controls"></div>
						<div class="playhead"></div>
					</div>
					<div class="jplayer"></div>
				</div>
			</div>
		</section>
		
		<!-- end main -->
		</td></tr>
	</table>

</td></tr>
</table>

</body>
</html>